<template>
  <div>
    <Container>
      <div class="classify_nav_container">
        <div class="classify_nav_wrapper">
          <van-search placeholder="请输入搜索关键词" />
        </div>
      </div>
      <div class="classify_visibister"></div>
      <van-row>
        <van-col span="6">
          <van-sidebar v-model="activeKey" @change="onChange">
            <van-sidebar-item
              v-for="(item, index) in LeftNavData"
              :key="index"
              :title="item.name"
            />
          </van-sidebar>
        </van-col>
        <van-col span="18">
          <div class="classify_swiper">
            <van-swipe
              class="my-swipe"
              :autoplay="3000"
              indicator-color="white"
            >
              <van-swipe-item v-for="(item, index) in swiperList" :key="index">
                <img :src="item.picUrl" />
              </van-swipe-item>
            </van-swipe>
          </div>
          <van-grid :column-num="3" icon-size="3rem">
            <van-grid-item
              v-for="(item, index) in RightIconData"
              :key="index"
              :icon="item.icon"
              :text="item.name"
              @click="addGotodes(item.id)"
            />
          </van-grid>
        </van-col>
      </van-row>
      <div class="classify_container"></div>
    </Container>
  </div>
</template>
<script>
import Container from "../components/container/Container"; //引入子组件（容器组件）
import {
  Col,
  Row,
  Sidebar,
  SidebarItem,
  Grid,
  GridItem,
  Search,
  Swipe,
  SwipeItem,
} from "vant";
import Vue from "vue";
Vue.use(Col);
Vue.use(Row);
Vue.use(Sidebar);
Vue.use(SidebarItem);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Search);
Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
  components: {
    //注册组件
    Container,
  },
  data() {
    return {
      activeKey: 0,
      activeIndex: 0,
      AllData: [], //分类所有数据
      LeftNavData: [], //分类数据
      RightIconData: [], //右边二级分类
      swiperList: [], //轮播图数据
    };
  },
  mounted() {
    this.LeftNavData.push({
      name: "所有分类",
      pid: 0,
    });
    // 分类数据
    this.$APIShow
      .goodsNav()
      .then((res) => {
        // console.log(res.data.data);
        this.AllData = res.data.data;
        this.AllData.forEach((el) => {
          if (el.pid === 0) {
            this.LeftNavData.push(el);
          } else {
            this.RightIconData.push(el);
          }
        });
      })
      .catch((err) => {
        console.log(err);
      });

    // 请求轮播图数据
    this.$APIShow
      .swiper()
      .then((res) => {
        // console.log(res.data.data);
        this.swiperList = res.data.data;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    // 点击切换对应小图
    onChange(index) {
      // console.log(index);
      this.activeIndex = index;
      var temp = this.LeftNavData[this.activeKey].id;
      // console.log(temp);
      this.RightIconData = [];
      if (this.activeKey === 0) {
        this.LeftNavData = [];
        this.LeftNavData.push({
          name: "所有分类",
          pid: 0,
        });
        this.AllData.forEach((el) => {
          if (el.pid === 0) {
            this.LeftNavData.push(el);
          } else {
            this.RightIconData.push(el);
          }
        });
      } else {
        this.AllData.forEach((el) => {
          if (el.pid === temp) {
            this.RightIconData.push(el);
          }
        });
      }
    },
      addGotodes(id){
        this.$router.push({
          path:'/classifyxq',
          query:{
            id:id
          }
        })
    },
  },
};
</script>
<style lang="scss" scoped>
.classify_nav_container {
  width: 100%;
  height: 3.2rem;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 9999;
  background: white;
  .classify_nav_wrapper {
    width: 100%;
    height: 100%;
  }
}
.classify_visibister {
  width: 100%;
  height: 3.2rem;
}
.classify_swiper {
  width: 90%;
  margin-left: 5%;
  height: 6rem;
}
.my-swipe{
  width: 100%;
  height: 100%;
}
// .my-swipe .van-swipe-item {
//   color: #fff;
//   font-size: 20px;
//   text-align: center;
// }
.my-swipe img {
  width: 100%;
  height: 100%;
}
.classify_container{
  width: 100%;
  height: 3.2rem;
}
</style>